<template>
  <div class="portal-page-wrapper">
    <a-row :gutter="16">
      <!-- 功能区 -->
      <!-- 快速入口区 -->
      <!-- 待办区 -->
      <!-- 图表区 -->
      <!-- 公告区 -->
      <template v-for="(item) in configList">
        <template v-if="componentsNameArr.includes(item.moduleComponentName)">
          <component
            :key="item.workspaceId"
            :is="item.moduleComponentName"
            v-bind="parameterObj(item.parameterList)"
            :workSpaceItem="item"
            @refreshPersonalConfig="refreshPersonalConfig">
          </component>
        </template>
      </template>
    </a-row>
  </div>
</template>
<script>
import { getPersonalConfig } from '@/api/devportalApi.js'
//引入功能区
import Fun from '@/pages/devportal/modules/funcArea/FuncArea'

import quickEntry from '@/pages/devportal/modules/systemFastEntry/SystemFastEntry'
// import todo from '@/pages/devportal/modules/dealtCenter/DealtCenter'
import Chart from '@/pages/devportal/modules/chart/Chart'
import Notice from '@/pages/devportal/modules/notice/Notice'
// import { mapActions } from 'vuex'
// import { langMixins } from '@/mixins/lang'
export default {
  name: 'DevPortal',
  // mixins: [langMixins],
  components: {
    Fun,
    quickEntry,
    // todo,
    Chart,
    Notice
  },
  data () {
    return {
      configList: [],
      componentsNameArr: ['fun', 'quickEntry', 'todo', 'chart', 'notice']
    }
  },
  methods: {
    // ...mapActions(['setBreadcrumbData']),
    parameterObj (parameterList) {
      let arr = parameterList.split(',')
      arr = arr.map(item => item.split('='))
      let propObj = {}
      for (let [key,val] of arr) {
        propObj[key] = val;
      }
      return propObj
    },
    getPageConfig () {
      getPersonalConfig().then(res => {
        let data = res.data ? res.data : []
        data.sort((a, b) => a.rank - b.rank)
        this.configList = data
      })
    },
    refreshPersonalConfig() {
      this.getPageConfig()
    },
  },
  mounted () {
    this.getPageConfig()
    // this.setBreadcrumbData([])
  }
}
</script>
<style lang="less" scoped>
.portal-page-wrapper {
  height: 100%;
  min-height: calc(100vh - 58px - 48px);
  background-color: #f0f2f5;
}
</style>